<%-- 
    Document   : zipcode
    Created on : 2009-7-11, 13:24:40
    Author     : think
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <title>AJAX Zip Checker </title>
        <link rel="stylesheet" href="style.css" type="text/css" />
        <script src="prototype.js" ></script>
        <style>
            body { font-family: verdana; }
            #zipResult { position:absolute; margin-left: 20px; display:inline; color: grey; font-size:large; }
            .goodzip { background: url("greencheck.gif") no-repeat left; padding-left:20px; }
            .badzip { color: red; }
            input { font-size: large; }
            label { font-size:large; color: silver; }
        </style>
        <script type="text/javascript" language="JavaScript">
            function checkZip() {
                if($F('zip').length == 5) {
                    var url = 'checkzip.jsp';
                    var params = 'zip=' + $F('zip');
                    var ajax = new Ajax.Updater(
                    {success: 'zipResult'},
                    url,
                    {method: 'get', parameters: params, onFailure: reportError});
                }
            }
            function reportError(request) {
                $F('zipResult') = "Error";
            }
        </script>
    </head>
    <body>

        <label for="zip">zip:</label>
        <input type="text" name="zip" id="zip" onkeyup="checkZip();" />
        <div id="zipResult"></div><p/>

    </body>
</html>
